<template>
  <div>
    <!-- 2.创建图表容器 -->
    <div ref="container" style="height:150px"></div>
  </div>
</template>
<script>
// 1.引入饼图表构造函数
import { Pie } from '@antv/g2plot'
// 2.引入get方法 --->发送get请求
import {get} from '@/utils/request'
export default {
  data() {
    return {
      // 存放设备状态数量
      empData:[]
    }
  },
  methods: {
    // 获取设备数据方法 发送请求
    async getEmpData(){
     let res = await get('/dashboard/queryDeviceOnlineNumber');
    //  console.log(res,'获取响应');
    //  将后端获取到数据赋值给变量
     this.empData = res.data;
      //  获取到数据后去加载图表
     this.loadCharts();
    },
    // 加载饼图方法
    loadCharts() {
      // 3.创建图表实例
      // container====>document.getElementById('container')
      // ref 
      const pie = new Pie(this.$refs.container, {
        appendPadding: 10,
        data:this.empData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        // 设置多色
        color:['#b170d9','#9599e9'],
        // 关闭图例
        legend:true,
        label: {
          type: 'outer',
          formatter(v){
            return v.value + '个'
          },
          style:{
            fill:'white',
            fontSize:18
          }
        },
        interactions: [{ type: 'element-active' }],
      });
      // 4.渲染图表
      pie.render()
    }
  },
  // 生命周期 钩子函数  created ---组件实例创建完成
  // 生命周期 组件实例挂载完成 --获取dom节点
  // vue 11个生命周期  created mounted
  mounted(){
    this.getEmpData();
    // this.loadCharts();
  }

}
</script>